Változtatható egy elem láthatósága a .hide (), .show () vagy .toggle () függvényekkel?
Hogyan tesztelné, ha egy elem látható vagy rejtett?
2020-12-07 21:52:01
1
2
Következő
Mivel a kérdés egyetlen elemre vonatkozik, ez a kód alkalmasabb lehet:
// Megjeleníti a CSS-tartalmat: [nincs | blokk], figyelmen kívül hagyja a láthatóságot: [igaz | hamis]
$ (element) .is (": látható");
// Ugyanez működik a rejtettel is
$ (element) .is (": rejtett");
Ez megegyezik Twernt javaslatával, de egyetlen elemre vonatkozik; és megegyezik a jQuery GYIK-ben ajánlott algoritmussal.
A jQuery's () használatával ellenőrizzük a kiválasztott elemet egy másik elemmel, választóval vagy bármely jQuery objektummal. Ez a módszer a DOM elemek mentén haladva egyezést talál, amely kielégíti az átadott paramétert. Igaz lesz, ha egyezik, ellenkező esetben hamis.
|
Használhatja a rejtett választót:
// Megfelel minden rejtett elemnek
$ ('elem: rejtett')
És a látható választó:
// Megfelel minden látható elemnek
$ ('elem: látható')
|
if ($ (element) .css ('display') == 'nincs' || $ (element) .css ("láthatóság") == "rejtett") {
// 'elem' rejtve van
}
A fenti módszer nem veszi figyelembe a szülő láthatóságát. A szülő figyelembevételéhez az .is (": hidden") vagy .is (": visible") kifejezést kell használnia.
Például,
Div2
A fenti módszer a div2 láthatónak tekinti, míg a látható nem. De a fentiek sok esetben hasznosak lehetnek, különösen akkor, ha meg kell találni, hogy vannak-e hibajelzések a rejtett szülőben, mert ilyen körülmények között: a látható nem fog működni.
|
Ezen válaszok egyike sem foglalkozik azzal a kérdéssel, amire én úgy gondolom, hogy erre kerestem: "Hogyan kezeljem azokat az elemeket, amelyek láthatók: rejtettek?" Sem a látható, sem a rejtett nem fogja ezt kezelni, mivel mindketten a dokumentáció szerint keresik a megjelenítést. Amennyire meg tudtam állapítani, nincs választó a CSS láthatóságának kezelésére. Így oldottam meg (szokásos jQuery választók, lehet, hogy sűrítettebb szintaxis van):
$ (". item"). mindegyik (function () {
if ($ (this) .css ("láthatóság") == "rejtett") {
// kezelni a nem látható állapotot
} más {
// kezeli a látható állapotot
}
});
|
A Hogyan lehet meghatározni a váltott elem állapotát?
A: látható és: rejtett választókkal meghatározhatja, hogy egy elem összeesett-e vagy sem.
var isVisible = $ ('# myDiv'). is (': látható');
var isHidden = $ ('# myDiv'). is (': rejtett');
Ha egyszerűen csak egy elemre hat, annak láthatósága alapján, akkor a következőket tartalmazhatja: látható vagy: rejtett a választó kifejezésbe. Például:
$ ('# myDiv: látható'). animáció ({left: '+ = 200px'}, 'lassú');
|
Gyakran ellenőrzi, hogy valami látható-e vagy sem, azonnal halad előre, és mást csinál vele. A jQuery láncolás ezt megkönnyíti.
Tehát, ha van választója, és csak akkor akar végrehajtani valamilyen műveletet, ha látható vagy rejtett, használhat szűrőt (": látható") vagy szűrőt (": rejtett"), majd láncolhatja a kívánt művelettel vesz.
Tehát egy if utasítás helyett, például:
if ($ ('# btnUpdate'). is (": látható"))
{
$ ('# btnUpdate'). animáció ({width: "toggle"}); // Gomb elrejtése
}
Vagy hatékonyabb, de még csúnyább:
var gomb = $ ('# btnUpdate');
if (button.is (": látható"))
{
button.animate ({width: "toggle"}); // Gomb elrejtése
}
Megteheti mindezt egy sorban:
$ ('# btnUpdate'). filter (": látható"). animál ({width: "toggle"});
|
A: látható választó a jQuery dokumentációja szerint:
CSS-értékük nincs.
Olyan formaelemek, amelyek type = "rejtett".
Szélességüket és magasságukat kifejezetten 0-ra állítják.
Egy ősi elem rejtve van, ezért az elem nem jelenik meg az oldalon.
A láthatósági elemek: rejtett vagy átlátszatlanság: 0 láthatónak tekinthetők, mivel továbbra is helyet foglalnak az elrendezésben.
Ez bizonyos esetekben hasznos, másokban haszontalan, mert ha ellenőrizni szeretné, hogy az elem látható-e (kijelző! = Nincs), figyelmen kívül hagyva a szülők láthatóságát, azt találja, hogy .css ("display") == 'nincs 'nemcsak gyorsabb, hanem a láthatósági ellenőrzést is helyesen adja vissza.
Ha megjelenítés helyett a láthatóságot szeretné ellenőrizni, akkor a következőt kell használnia: .css ("láthatóság") == "rejtett".
Vegye figyelembe a további jQuery-megjegyzéseket is:
Mivel a: látható a jQuery kiterjesztése, és nem része a CSS specifikációnak, a: látható lekérdezések nem használhatják ki a natív DOM querySelectorAll () módszer által biztosított teljesítménynövelést. A legjobb teljesítmény eléréséhez a: látható elem kiválasztásához először válassza ki az elemeket egy tiszta CSS választóval, majd használja a .filter (": látható") fájlt.
Továbbá, ha aggódik a teljesítmény miatt, akkor jelölje be a Most látod engem… teljesítmény mutatása / elrejtése jelölést (2010-05-04). És használjon más módszereket az elemek megjelenítésére és elrejtésére.
|
Ez nekem működik, és a show () és a hide () használatával rejtetté / láthatóvá teszem a div-em:
if ($ (this) .css ('display') == 'nincs') {
/ * a kódod ide megy * /
} más {
/ * alternatív logika * /
}
|
Hogyan működik az elemek láthatósága és a jQuery;
Egy elem elrejthető a kijelzővel: none,láthatóság: rejtett vagy átlátszatlanság: 0. A módszerek közötti különbség:
display: egyik sem rejti el az elemet, és nem foglal helyet;
láthatóság: rejtett elrejti az elemet, de így is helyet foglal az elrendezésben;
opacitás: 0 az elemet „láthatóság: rejtettként” rejti, és még mindig helyet foglal az elrendezésben; az egyetlen különbség az, hogy az átlátszatlanság lehetővé teszi az ember számára, hogy egy elemet részben átlátszóvá tegyen;
ha ($ ('.. cél'). is (': rejtett')) {
$ ('.. cél'). show ();
} más {
$ ('. cél'). hide ();
}
ha ($ ('.. cél'). is (': látható')) {
$ ('.. cél'). hide ();
} más {
$ ('.. cél'). show ();
}
if ($ ('. cél-láthatóság'). css ('láthatóság') == 'rejtett') {
$ ('. cél-láthatóság'). css ({
láthatóság: "látható",
display: ""
});
} más {
$ ('. cél-láthatóság'). css ({
láthatóság: "rejtett",
display: ""
});
}
if ($ ('. cél-láthatóság'). css ('átlátszatlanság') == "0") {
$ ('. cél-láthatóság'). css ({
átlátszatlanság: "1",
display: ""
});
} más {
$ ('. cél-láthatóság'). css ({
átlátszatlanság: "0",
display: ""
});
}
Hasznos jQuery váltási módszerek:
$ ('. click'). click (function () {
$ ('. cél'). váltás ();
});
$ ('. click'). click (function () {
$ ('.. cél'). slideToggle ();
});
$ ('. click'). click (function () {
$ ('. target'). fadeToggle ();
});
|
Ezt egyszerű JavaScript használatával is megteheti:
függvény isRendered (domObj) {
if ((domObj.nodeType! = 1) || (domObj == dokumentum.test)) {
return true;
}
if (domObj.currentStyle && domObj.currentStyle ["display"]! = "nincs" && domObj.currentStyle ["láthatóság"]! = "rejtett") {
return isRendered (domObj.parentNode);
} else if (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle (domObj, null);
if (cs.getPropertyValue ("display")! = "nincs" && cs.getPropertyValue ("láthatóság")! = "rejtett") {
return isRendered (domObj.parentNode);
}
}
return false;
}
Megjegyzések:
Mindenhol működik
Beágyazott elemek esetén működik
CSS és inline stílusokhoz működik
Nem igényel keretet
|
A CSS osztályt használnám .hide {display: none! Fontos; }.
A rejtés / megjelenítés érdekében hívom az .addClass ("hide") /. RemoveClass ("hide") fájlt. A láthatóság ellenőrzéséhez a .hasClass ("hide") fájlt használom.
Ez egy egyszerű és világos módszer az elemek ellenőrzésére / elrejtésére / megjelenítésére, ha nem tervezi .toggle () vagy .animate () módszerek használatát.
|
Demo Link
$ ('# clickme'). click (function () {
$ ('# book'). toggle ('lassú', function () {
// Animáció kész.
figyelmeztetés ($ ('# book'). is (": látható")); // <--- IGAZ, ha látható Hamis, ha rejtve van
});
});
Kattints ide
Forrás:
Blogger Plug n Play - jQuery eszközök és widgetek: Hogyan láthatja el, hogy az elem rejtve van-e vagy látható-e a jQuery használatával
|
Egyszerűen használhatja a rejtett vagy látható attribútumot, például:
$ ('elem: rejtett')
$ ('elem: látható')
Vagy egyszerűsítheti ugyanezt az alábbiak szerint.
$ (element) .is (": látható")
|
Az ebdiv-re a style = "display: none;" értéket kell beállítani. Műsorra és rejtésre egyaránt használható:
$ (dokumentum) .ready (függvény () {
$ ("# eb"). kattintson (function () {
$ ("# ebdiv"). toggle ();
});
});
|
Egy másik válasz, amelyet figyelembe kell vennie, ha elrejt egy elemet, akkor használja a jQuery-t, de a tényleges elrejtés helyett eltávolítja az egész elemet, de a HTML-tartalmát és magát a címkét is jQuery változóba másolja, mindössze annyit kell tennie, hogy tesztelje, van-e ilyen címke a képernyőn, a normál if (! $ ('# thetagname'). hossz használatával.
|
Ha elemet tesztelnek a: rejtett választóval szemben a jQuery-ben, figyelembe kell venni, hogy egy abszolút pozícionált elem rejtettnek ismerhető fel, bár gyermekelemeik láthatók.
Ez elsősorban némileg ellentmondásosnak tűnik - bár a jQuery dokumentációjának alaposabb áttekintése megadja a releváns információkat:
Az elemeket több okból is rejtettnek tekinthetjük: [...] Szélességüket és magasságukat kifejezetten 0-ra állítják. [...]
Tehát ennek valójában van értelme a box-modell és az elem kiszámított stílusa szempontjából. Még akkor is, ha a szélességet és a magasságot nem állítják kifejezetten 0-ra, implicit módon is beállíthatják őket.
Vessen egy pillantást a következő példára:
console.log ($ ('. foo'). is (': rejtett')); // igaz
console.log ($ ('. bar'). is (': rejtett')); // hamis
.foo {
pozíció: abszolút;
bal: 10px;
felső: 10px;
háttér: # ff0000;
}
.rúd {
pozíció: abszolút;
balra: 10px;
felső: 10px;
szélesség: 20px;
magasság: 20px;
háttér: # 0000ff;
}
JQuery 3.x frissítés:
A jQuery 3 alkalmazásával a leírt viselkedés megváltozik! Az elemeket akkor tekintjük láthatónak, ha vannak elrendezési dobozaik, beleértve a nulla szélességet és / vagy magasságot is.
JSFiddle jQuery 3.0.0-alfa1-gyel:
http://jsfiddle.net/pM2q3/7/
Ekkor ugyanaz a JavaScript kód fogja megadni ezt a kimenetet:
console.log ($ ('. foo'). is (': rejtett')); // hamis
console.log ($ ('. bar'). is (': rejtett'));// hamis
|
Ez működhet:
várható ($ ("# message_div"). css ("display")). toBe ("nincs");
|
Példa:
$ (dokumentum) .ready (függvény () {
if ($ ("# checkme: rejtett"). hossz) {
console.log ('Rejtett');
}
});
Kategória: Hal
Termék: Atlanti lazac
Faj: Salmo salar
Forma: Steakek
|
Annak ellenőrzésére, hogy nem látható-e, használom!:
ha (! $ ('# könyv'). is (': látható')) {
figyelmeztetés ('# könyv nem látható')
}
Vagy a következő is a sam, amely a jQuery választót egy változóba menti, hogy jobb teljesítményt nyújtson, amikor többször szüksége van rá:
var $ book = $ ('# book')
if (! $ book.is (': látható')) {
figyelmeztetés ('# könyv nem látható')
}
|
Használjon osztályváltást, ne stílusszerkesztést. . .
Az elemek "elrejtésére" kijelölt osztályok használata egyszerű és egyben a leghatékonyabb módszer. Ha a „rejtett” osztályt a „Nincs” megjelenítési stílussal kapcsolja be, akkor az gyorsabb lesz, mint a stílus közvetlen szerkesztése. Néhányat elég alaposan elmagyaráztam a Stack Overflow kérdésben. Két elem láthatóvá / rejtetté változtatása ugyanabban a div-ben.
JavaScript legjobb gyakorlatok és optimalizálás
Itt van egy igazán felvilágosító videó Nicholas Zakas, a Google front-end mérnöke által készített Google Tech Talkról:
Gyorsítsa fel Javascriptjét (YouTube)
|
Példa az Adblocker látható ellenőrzésének használatára aktiválva:
$ (dokumentum) .ready (függvény () {
if (! $ ("# ablockercheck"). is (": látható"))
$ ("# ablockermsg"). text ("Kérjük, tiltsa le az adblockert."). show ();
});
Az "ablockercheck" egy azonosító, amelyet az adblocker blokkol. Tehát ellenőrizve, hogy látható-e, akkor észleli, hogy az adblocker be van-e kapcsolva.
|
Végül is egyik példa sem felel meg nekem, ezért a sajátomat írtam.
Tesztek (nem támogatja az Internet Explorer szűrőt: alfa):
a) Ellenőrizze, hogy a dokumentum nincs-e elrejtve
b) Ellenőrizze, hogy egy elem nulla szélességgel / magassággal / átlátszatlansággal rendelkezik-e vagy nincs-e megjelenítve: nincs / láthatóság: rejtve a belső stílusokban
c) Ellenőrizze, hogy az elem közepét (azért is, mert gyorsabb, mint minden pixel / sarok tesztelése) nem rejti el más elem (és az összes ős, például: túlcsordulás: rejtett / görgetés / egyik elem a másik felett) vagy a képernyő szélei
d) Ellenőrizze, hogy egy elem nulla szélességgel / magassággal / átlátszatlansággal vagy kijelzővel rendelkezik-e: nincs / láthatóság: rejtve a számított stílusokban (az összes ős között)
Tesztelve
Android 4.4 (natív böngésző / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (Internet Explorer 5-11 dokumentummódok + Internet Explorer 8 virtuális gép) és a Safari (Windows / Mac / iOS).
var is_visible = (function () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHeight - 1: 0,
rokon = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
belüli funkció (gyermek, szülő) {
míg (gyermek) {
ha (gyermek === szülő) igaz;
gyermek = gyermek.szülőNode;
}
return false;
};
visszatérési függvény (elem) {
ha (
dokumentum.rejtve ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'rejtett' ||
elem.style.display == 'nincs' ||
elem.style.opacity === 0
) return false;
var rect = elem.getBoundingClientRect ();
ha (rokon) {
ha (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) false értéket ad vissza;
} else if (
! belül (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (ablak.innerWidth || document.documentElement.clientWidth)
)
) return false;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
míg (el) {
if (el === dokumentum) {break;} else if (! el.parentNode) hamis értéket ad vissza;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
ha (comp && (comp.visibility == 'rejtett' || comp.display == 'none' || (type of comp.opacity! == 'undefined' && comp.opacity! = 1))] false értéket ad vissza;
el = el.parentNode;
}
}
return true;
}
}) ();
Hogyan kell használni:
is_visible (elem) // logikai
|
Ellenőriznie kell mindkettőt ... Kijelző és láthatóság:
if ($ (this) .css ("display") == "nincs" || $ (this) .css ("láthatóság") == "rejtett") {
// Az elem nem látható
} más {
// Az elem látható
}
Ha ellenőrizzük, hogy van-e $ (this) .is (": látható"), a jQuery automatikusan ellenőrzi mindkét dolgot.
|
Talán tehet ilyesmit
$ (dokumentum) .ready (függvény () {
var látható =$ ('# tElement'). is (': látható');
ha (látható) {
riasztás ("látható");
// Kód
}
más
{
riasztás ("rejtett");
}
});
Keresztnév
|
Egyszerűen ellenőrizze a láthatóságot egy logikai érték ellenőrzésével, például:
ha (this.hidden === false) {
// A kódod
}
Ezt a kódot használtam minden funkcióhoz. Ellenkező esetben a (': látható') paranccsal ellenőrizheti az elem láthatóságát.
|
Mivel a láthatóság: rejtett vagy átlátszatlanság: 0 elemeket láthatónak tekintjük, mivel ezek még elfogyasztanak helyet az elrendezésben (a jQuery: visible Selector esetében leírtak szerint) - ellenőrizhetjük, hogy az elem valóban így látható-e:
függvény isElementReallyHidden (el) {
return $ (el) .is (": hidden") || $ (el) .css ("láthatóság") == "rejtett" || $ (el) .css ('átlátszatlanság') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). mindegyik (function () {
if (isElementReallyHidden (ez)) {
booElementReallyShowed = hamis;
}
});
|
De mi van, ha az elem CSS-je hasonló a következőhöz?
.elem{
pozíció: abszolút; bal: -9999;
}
Tehát ezt a választ a Verem túlcsordulás kérdésére is figyelembe kell venni.
|
Funkció hozható létre a láthatóság / kijelző attribútumok ellenőrzésére annak felmérése érdekében, hogy az elem megjelenik-e a felhasználói felületen vagy sem.
function checkUIElementVisible (elem) {
return ((element.css ('display')! == 'none') && (element.css ('láthatóság')! == 'rejtett'));
}
Dolgozó hegedülés
|
Itt van még egy háromfeltételes kifejezés az elem állapotának ellenőrzéséhez, majd a váltáshoz:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': látható')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle ') .show (' lassú ');});
|
if ($ ('# postcode_div'). is (': látható')) {
if ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). text ('\ u00a0');
} más {
$ ('# spanPost'). text ($ ('# postcode_text'). val ());
}
|
1
2
Következő
Nagyon aktív kérdés. Nyerjen 10 hírnevet a kérdés megválaszolásához. A jó hírnév követelménye megvédi ezt a kérdést a spamektől és a nem válaszolóktól.
Nem a keresett válasz? Böngésszen a javascript jquery dom láthatóságával címkézett egyéb kérdésekben, vagy tegye fel saját kérdését
Forrás:
Blogger Plug n Play - jQuery eszközök és widgetek: Hogyan láthatja el, hogy az elem rejtve van-e vagy látható-e a jQuery használatával
|
Egyszerűen használhatja a rejtett vagy látható attribútumot, például:
$ ('elem: rejtett')
$ ('elem: látható')
Vagy egyszerűsítheti ugyanezt az alábbiak szerint.
$ (element) .is (": látható")
|
Az ebdiv-re a style = "display: none;" értéket kell beállítani. Műsorra és rejtésre egyaránt használható:
$ (dokumentum) .ready (függvény () {
$ ("# eb"). kattintson (function () {
$ ("# ebdiv"). toggle ();
});
});
|
Egy másik válasz, amelyet figyelembe kell vennie, ha elrejt egy elemet, akkor használja a jQuery-t, de a tényleges elrejtés helyett eltávolítja az egész elemet, de a HTML-tartalmát és magát a címkét is jQuery változóba másolja, mindössze annyit kell tennie, hogy tesztelje, van-e ilyen címke a képernyőn, a normál if (! $ ('# thetagname'). hossz használatával.
|
Ha elemet tesztelnek a: rejtett választóval szemben a jQuery-ben, figyelembe kell venni, hogy egy abszolút pozícionált elem rejtettnek ismerhető fel, bár gyermekelemeik láthatók.
Ez elsősorban némileg ellentmondásosnak tűnik - bár a jQuery dokumentációjának alaposabb áttekintése megadja a releváns információkat:
Az elemeket több okból is rejtettnek tekinthetjük: [...] Szélességüket és magasságukat kifejezetten 0-ra állítják. [...]
Tehát ennek valójában van értelme a box-modell és az elem kiszámított stílusa szempontjából. Még akkor is, ha a szélességet és a magasságot nem állítják kifejezetten 0-ra, implicit módon is beállíthatják őket.
Vessen egy pillantást a következő példára:
console.log ($ ('. foo'). is (': rejtett')); // igaz
console.log ($ ('. bar'). is (': rejtett')); // hamis
.foo {
pozíció: abszolút;
bal: 10px;
felső: 10px;
háttér: # ff0000;
}
.rúd {
pozíció: abszolút;
balra: 10px;
felső: 10px;
szélesség: 20px;
magasság: 20px;
háttér: # 0000ff;
}
JQuery 3.x frissítés:
A jQuery 3 alkalmazásával a leírt viselkedés megváltozik! Az elemeket akkor tekintjük láthatónak, ha vannak elrendezési dobozaik, beleértve a nulla szélességet és / vagy magasságot is.
JSFiddle jQuery 3.0.0-alfa1-gyel:
http://jsfiddle.net/pM2q3/7/
Ekkor ugyanaz a JavaScript kód fogja megadni ezt a kimenetet:
console.log ($ ('. foo'). is (': rejtett')); // hamis
console.log ($ ('. bar'). is (': rejtett'));// hamis
|
Ez működhet:
várható ($ ("# message_div"). css ("display")). toBe ("nincs");
|
Példa:
$ (dokumentum) .ready (függvény () {
if ($ ("# checkme: rejtett"). hossz) {
console.log ('Rejtett');
}
});
|
Annak ellenőrzésére, hogy nem látható-e, használom!:
ha (! $ ('# könyv'). is (': látható')) {
figyelmeztetés ('# könyv nem látható')
}
Vagy a következő is a sam, amely a jQuery választót egy változóba menti, hogy jobb teljesítményt nyújtson, amikor többször szüksége van rá:
var $ book = $ ('# book')
if (! $ book.is (': látható')) {
figyelmeztetés ('# könyv nem látható')
}
|
Használjon osztályváltást, ne stílusszerkesztést. . .
Az elemek "elrejtésére" kijelölt osztályok használata egyszerű és egyben a leghatékonyabb módszer. Ha a „rejtett” osztályt a „Nincs” megjelenítési stílussal kapcsolja be, akkor az gyorsabb lesz, mint a stílus közvetlen szerkesztése. Néhányat elég alaposan elmagyaráztam a Stack Overflow kérdésben. Két elem láthatóvá / rejtetté változtatása ugyanabban a div-ben.
JavaScript legjobb gyakorlatok és optimalizálás
Itt van egy igazán felvilágosító videó Nicholas Zakas, a Google front-end mérnöke által készített Google Tech Talkról:
Gyorsítsa fel Javascriptjét (YouTube)
|
Példa az Adblocker látható ellenőrzésének használatára aktiválva:
$ (dokumentum) .ready (függvény () {
if (! $ ("# ablockercheck"). is (": látható"))
$ ("# ablockermsg"). text ("Kérjük, tiltsa le az adblockert."). show ();
});
Az "ablockercheck" egy azonosító, amelyet az adblocker blokkol. Tehát ellenőrizve, hogy látható-e, akkor észleli, hogy az adblocker be van-e kapcsolva.
|
Végül is egyik példa sem felel meg nekem, ezért a sajátomat írtam.
Tesztek (nem támogatja az Internet Explorer szűrőt: alfa):
a) Ellenőrizze, hogy a dokumentum nincs-e elrejtve
b) Ellenőrizze, hogy egy elem nulla szélességgel / magassággal / átlátszatlansággal rendelkezik-e vagy nincs-e megjelenítve: nincs / láthatóság: rejtve a belső stílusokban
c) Ellenőrizze, hogy az elem közepét (azért is, mert gyorsabb, mint minden pixel / sarok tesztelése) nem rejti el más elem (és az összes ős, például: túlcsordulás: rejtett / görgetés / egyik elem a másik felett) vagy a képernyő szélei
d) Ellenőrizze, hogy egy elem nulla szélességgel / magassággal / átlátszatlansággal vagy kijelzővel rendelkezik-e: nincs / láthatóság: rejtve a számított stílusokban (az összes ős között)
Tesztelve
Android 4.4 (natív böngésző / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (Internet Explorer 5-11 dokumentummódok + Internet Explorer 8 virtuális gép) és a Safari (Windows / Mac / iOS).
var is_visible = (function () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHeight - 1: 0,
rokon = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
belüli funkció (gyermek, szülő) {
míg (gyermek) {
ha (gyermek === szülő) igaz;
gyermek = gyermek.szülőNode;
}
return false;
};
visszatérési függvény (elem) {
ha (
dokumentum.rejtve ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'rejtett' ||
elem.style.display == 'nincs' ||
elem.style.opacity === 0
) return false;
var rect = elem.getBoundingClientRect ();
ha (rokon) {
ha (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) false értéket ad vissza;
} else if (
! belül (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (ablak.innerWidth || document.documentElement.clientWidth)
)
) return false;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
míg (el) {
if (el === dokumentum) {break;} else if (! el.parentNode) hamis értéket ad vissza;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
ha (comp && (comp.visibility == 'rejtett' || comp.display == 'none' || (type of comp.opacity! == 'undefined' && comp.opacity! = 1))] false értéket ad vissza;
el = el.parentNode;
}
}
return true;
}
}) ();
Hogyan kell használni:
is_visible (elem) // logikai
|
Ellenőriznie kell mindkettőt ... Kijelző és láthatóság:
if ($ (this) .css ("display") == "nincs" || $ (this) .css ("láthatóság") == "rejtett") {
// Az elem nem látható
} más {
// Az elem látható
}
Ha ellenőrizzük, hogy van-e $ (this) .is (": látható"), a jQuery automatikusan ellenőrzi mindkét dolgot.
|
Talán tehet ilyesmit
$ (dokumentum) .ready (függvény () {
var látható =$ ('# tElement'). is (': látható');
ha (látható) {
riasztás ("látható");
// Kód
}
más
{
riasztás ("rejtett");
}
});
Keresztnév
|
Egyszerűen ellenőrizze a láthatóságot egy logikai érték ellenőrzésével, például:
ha (this.hidden === false) {
// A kódod
}
Ezt a kódot használtam minden funkcióhoz. Ellenkező esetben a (': látható') paranccsal ellenőrizheti az elem láthatóságát.
|
Mivel a láthatóság: rejtett vagy átlátszatlanság: 0 elemeket láthatónak tekintjük, mivel ezek még elfogyasztanak helyet az elrendezésben (a jQuery: visible Selector esetében leírtak szerint) - ellenőrizhetjük, hogy az elem valóban így látható-e:
függvény isElementReallyHidden (el) {
return $ (el) .is (": hidden") || $ (el) .css ("láthatóság") == "rejtett" || $ (el) .css ('átlátszatlanság') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). mindegyik (function () {
if (isElementReallyHidden (ez)) {
booElementReallyShowed = hamis;
}
});
|
De mi van, ha az elem CSS-je hasonló a következőhöz?
.elem{
pozíció: abszolút; bal: -9999;
}
Tehát ezt a választ a Verem túlcsordulás kérdésére is figyelembe kell venni.
|
Funkció hozható létre a láthatóság / kijelző attribútumok ellenőrzésére annak felmérése érdekében, hogy az elem megjelenik-e a felhasználói felületen vagy sem.
function checkUIElementVisible (elem) {
return ((element.css ('display')! == 'none') && (element.css ('láthatóság')! == 'rejtett'));
}
Dolgozó hegedülés
|
Itt van még egy háromfeltételes kifejezés az elem állapotának ellenőrzéséhez, majd a váltáshoz:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': látható')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle ') .show (' lassú ');});
|
if ($ ('# postcode_div'). is (': látható')) {
if ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). text ('\ u00a0');
} más {
$ ('# spanPost'). text ($ ('# postcode_text'). val ());
}
|
1
2
Következő
Nagyon aktív kérdés. Nyerjen 10 hírnevet a kérdés megválaszolásához. A jó hírnév követelménye megvédi ezt a kérdést a spamektől és a nem válaszolóktól.
Nem a keresett válasz? Böngésszen a javascript jquery dom láthatóságával címkézett egyéb kérdésekben, vagy tegye fel saját kérdését